<template>
	<view class="steps">
		<view class="card-title">
			<view>生产步骤</view>
		</view>
		<view class="card-content" style="height: 70%;overflow: auto;">
			<view class="step-list" v-if="stepsList.length>0" ref="stepList">
				<!--  :class="['step-item', 'status' + item.executeStatus]" -->
				<view class="step-item" v-for="(item, index) in stepsList" :key="index" :index="index + 1">
					<text style="color: #56d678;font-size: 30rpx;width: 16px;">✓</text>
					<text style="font-size:30rpx;margin-right: 15rpx;">{{ item.proStepName }}</text>
					{{item.recordTime}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:'StepRecords',
		data() {
			return {
				stepsList: [{
						proStepName: '工步1',
						recordTime: '2025-09-04'
					},
					{
						proStepName: '工步1',
						recordTime: '2025-09-04'
					}
				]
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.steps {
		height: 100%;
		flex: 1;
		position: relative;
		padding: 20rpx;
		display: flex;
		flex-direction: column;


		.step-list {
			height: 90%;
			overflow: auto;

			&::-webkit-scrollbar {
				width: 6px;
				/* 可以调整滚动条的宽度 */
			}

			.step-item {
				line-height: 32px;
				height: 32px;
				font-size: 20rpx;
				margin: 4px 0;
				color: #000;
				display: flex;
				align-items: center;
			}

			.step-item:last-child::after {
				content: none;
			}
		}
	}
</style>